<template>
  <div class="name">
    <font style='font-size:20px;color:gray;cursor:pointer;' @click="$router.push({path:'/me'})"><返回</font>
      <input v-model='oldpwd' v-show='this.$store.state.pwdshow' type="password" name='oldpassword' maxlength="20" autocomplete="off" placeholder="请输入旧密码" @input='surebtn'/>
      <input type="password" name='password' maxlength="20" autocomplete="off" placeholder="请输入密码" v-model="pwd" @input='surebtn'/>
      <input type="password" maxlength="20" autocomplete="off" placeholder="请输入确认密码" v-model="surepwd" @input='surebtn'/>
      <div class="msg">必须是6-20个英文字母、数字或符号(除空格)</div>
      <button class="sure" type="button" ref="btn" @click='sendchange'>确认修改</button>
  </div>
</template>

<script>
import {mapMutations} from 'vuex'
export default {
  name: "name",
  data() {
    return {
      oldpwd:'',
      pwd:'',
      surepwd:''
    };
  },
  methods: {
    ...mapMutations(['setpwdshow']),
    surebtn() {
      if (this.pwd.length>=6 && this.surepwd==this.pwd && this.pwd.indexOf(' ')==-1) {
        this.$refs.btn.style.background='rgb(0,166,255)'
        this.$refs.btn.style.color='white'
        this.$refs.btn.type='submit'
        
      }else{
         this.$refs.btn.style.background='rgb(211,211,211)'
        this.$refs.btn.type='button'
        this.$refs.btn.style.color='gray'
      }
    },
    sendchange(){
      if(this.$refs.btn.type=='submit'){
        this.axios.post('http://127.0.0.1:3000/changepassword',{oldpwd:this.oldpwd,newpwd:this.pwd,phone:this.$store.state.phone})
        .then((res)=>{
          if(res.data.msg==0){
            alert('密码错误')
          }else{
            this.$store.commit('setpwdshow',res.data.msg)
            this.$router.push('/me')
          }
        })
        .catch((err)=>{
          console.log(err)
        })
      }
    }
  }
};
</script>

<style scoped>
.sure {
  width: 100%;
  height: 58px;
  outline: none;
  border: none;
  border-radius: 5px;
  margin-top: 20px;
  font-size: 20px;
  color: gray;
}
.msg {
  padding: 12px 0 0 0;
  font-size: 12px;
  color: gray;
}
.name {
  width: 85%;
  margin: 20px auto;
}
input {
  outline: none;
  background: none;
  border: none;
  border-bottom: 1px solid gainsboro;
  width: 100%;
  height: 45px;
  font-size: 20px;
  margin-top:20px;
}
</style>